<template>
    <div class="container">
        <!--头部导航条-->
        <div class="nav">
            <div style="margin-left:30px">
                <ul v-if="userTel==null" class="navul">
                    <li  @click="gohomepage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li><a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a @click="gozce">注册</a></li>
                    <li>退出</li>
                </ul>
                <ul v-else class="navul">
                    <li @click="gohomepage">
                        <van-icon name="wap-home" color="#FF4400" />闲呗首页
                    </li>
                    <li>欢迎你：{{this.userTel}}</li>
                    <li @click="tuichu">退出</li>
                </ul>
            </div>
            <div style="float: right;">
                <ul class="navultow">
                    <li @click="gomycenter" class="mycb1"><a class="myxb">我的闲呗</a>
                        <div class="hen"></div>
                        <ul class="second">
                            <li><a class="second1">我已买到的宝贝</a></li>
                            <li class="second1">我已卖出的宝贝</li>
                        </ul>
                    </li>
                    <!-- <li>
                        <van-icon name="shopping-cart-o" color="#FF4400" />购物车<div class="hen"></div>
                    </li> -->
                    <li>
                        <van-icon name="star" color="#FF4400" />收藏夹<div class="hen"></div>
                    </li>
                    <!-- <li>
                        手机版<div class="hen"></div>
                    </li> -->
                    <li @click="gocustomerchat()" >联系客服<div class="hen"></div>
                    </li>
                    <li>商家中心</li>

                </ul>
            </div>
        </div>
        <!-- 头部 -->
        <div class="header">
            <div >
                <img src="http://112.74.185.144:8000/files/Zqm1666747516.jpg">
                <input type="text" placeholder="请输入搜索内容" v-model="search">
               <van-button class="a1" @click="handleNumber(-1)">搜索</van-button>
            </div>
        </div>

        <!-- 中间 -->
        <div class="content">
            <!-- 左侧 -->
            <div class="left">
                <div>所有分类></div>
                <div class="left1">
                    <div style="display:flex; justify-content: space-around;" >
                        <div @click="gofenlei(1)" class="classify">电器</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(2)" class="classify">数码</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(6)" class="classify" >家装</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(7)" class="classify" >玩具</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(3)" class="classify">服装</div> 
                    </div>

                    <div style="display:flex; justify-content: space-around;" >
                        <div @click="gofenlei(4)" class="classify">奢侈品</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(9)" class="classify">运动</div>
                         <div class="fenxqing">/</div>
                        <div @click="gofenlei(11)" class="classify">游戏</div> 
                        <div  class="fenxqing">/</div>
                        <div @click="gofenlei(12)" class="classify">图书</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(14)" class="classify">百货</div>
                    </div>


                    <div style="display:flex; justify-content: space-around;" >
                        <div @click="gofenlei(10)" class="classify" >宠物</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(8)" class="classify">房产</div> 
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(5)" class="classify">车类</div>
                        <div class="fenxqing">/</div>
                        <div @click="gofenlei(13)" class="classify">建材</div>
                        <div class="fenxqing">/</div>
                        <div>其他</div>
                    </div>
                    
                    <div class="left2">
                        <ul>
                            <li :class="{textRed: index==0}"  @click="handleNumber(0)">综合排序</li>
                            <!-- <li :class="{textRed: index==1}"  @click="handleNumber(1)">销量</li> -->
                            <li :class="{textRed: index==1}"  @click="handleNumber(1)">信用</li>
                            <li>价格∨
                                <ul>
                                    <li :class="{textRed: index==2}"  @click="handleNumber(2)">价格从低到高</li>
                                    <li :class="{textRed: index==3}"  @click="handleNumber(3)">价格从高到底</li>
                                </ul>
                            </li>
                        
                        </ul>
                    </div>
                    <div class="left3">
                        <ul>
                            <li><input type="checkbox" >包邮</li>
                            <li><input type="checkbox" >赠送退费运费险</li>
                            <li><input type="checkbox" >新品</li>
                            <li><input type="checkbox" >公益宝贝</li>
                            <li><input type="checkbox" >7天内退货</li>
                             <li><input type="checkbox" >海外商品</li>
                              <li><input type="checkbox" >通用排序</li>
                        </ul>
                    </div>
                </div>

                <div class="left4" >
                    <div v-for="(item,index) in productArr" :key="index" @click="jump(item)">
                        <img :src="item.commodityImg" alt="">
                        <div style="display:flex;align-items: center; margin-top:10px">
                            <span style="font-size:20px;color:red;margin-left:20px  " >￥{{item.currentPrice}}    <span style="font-size: 12px; text-decoration:line-through;margin-left: 10px;color:gray">{{item.originalPrice}}</span>  <el-tag type="danger" size="medium">包邮</el-tag></span>  <span style="font-size:17px;">{{item.people}}</span>
                        </div>
                        <div class="commodityName1">{{item.commodityName}}</div>

                        <div style="display:flex;justify-content: space-around; align-items: center;  margin-top:38px">
                            <span style="color:gold"><i class="el-icon-star-off"></i>{{item.seller}}</span>  <span style="color:cornflowerblue;">{{item.address}}</span>
                        </div>
                    </div>
                </div>


                <!-- 分页按钮 -->
                <div class="feneybox" style="margin-top:30px">
                    <el-pagination
                        background  @current-change="handleCurrentChange"
                        :page-size="pagesize"
                        layout="prev, pager, next"
                        :total="pagetotal">
                    </el-pagination>
                </div>

            </div>
            <!-- 右侧 -->
            <div class="right">
                <p><span>掌柜热卖</span> <span><van-tag color="gray" plain>广告</van-tag></span></p>
                <div v-for="(item,index) in productArr1" :key="index"  @click="jump(item)">
                    <img :src=item.commodityImg alt="">
                    <div class="right1">{{item.commodityName}}</div>
                    <div class="right2">
                        <span style="font-size:20px;color:red">￥{{item.currentPrice}}    <span style="font-size: 12px; text-decoration:line-through;margin-left: 10px;color:gray">{{item.originalPrice}}</span>  <el-tag type="danger" size="medium">包邮</el-tag></span>  <span style="font-size:17px;">{{item.people}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer">
            <img src="/imgs/底部.png" alt="">
            <span>闲呗官网 31010402000253号 | 沪ICP备17003747号-1</span>
        </div>
    </div>
</template>


<script>
// 轻提示
export default {
    data() {
      return{
            // 分页
            pagecurr:1,//当前页
            pagesize:12, //一页有几条数据
            pagestart:0,//数据开始位置
            pagecount:1,//页数（按钮的数量）
            pagetotal:0,//数据总条数

            myindex:localStorage.getItem('a'),

            // 综合排序 销量。。索引
            index:0,

            // 搜索值
            search:"",

            typeid:'',

            // 商品数组
            productArr:[],

            // 右侧活动热卖
            productArr1:[],

            userTel:sessionStorage.getItem('userTel'),
      }
    },
    methods:{
        //跳转商品详情页
        jump(item){
            this.$router.push("goods")
            // let routeUrl = this.$router.resolve({
            //     path: '/goods'// 这里的路径就可以正常的写，不需要添加_blank: true
            // })
            // window.open(routeUrl.href, '_blank')

            // 把商品id缓存到本地
            localStorage.setItem("hx220408commodityId",item.commodityId)
            localStorage.setItem("hx220408userTel",item.userTel)
        },
         
        // 分页请求数据
        handleAxios(){
            this.$axios({
                url:"/api/commodityTable1/get",
                method:"get",
                params:{
                    search:this.search, //搜索
                    index:this.index,  //综合排序，销量，价格索引
                    start:(this.pagecurr-1)*this.pagesize, //数据开始位置
                    size:this.pagesize,  //一页有几条数据
                    typeid : this.typeid,
                }
            })
            .then(resp=>{
                console.log(resp.data.data,166)
                // console.log(resp.data.num,167)  
                this.productArr=resp.data.data
                this.pagetotal=resp.data.num   //总条数
                this.pagecount=Math.ceil(this.pagetotal/this.pagesize)  //按钮数量(总页数)
            })
            .catch(err=>{
                console.log(err)
            })
        },

        //点击按钮跳转当前页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pagecurr= val;  //当前页数
            this.handleAxios()
        },

        


        // 综合排序 信用 价格排序。。。
        handleNumber(n){
            this.index=n
            console.log(n,206)
            console.log(this.search,216)
            this.handleAxios()
        },

        // 分类跳转
        gofenlei(id){
           console.log(id,275)
           this.pagecurr=1
           this.index=666,
           this.typeid=id,
           this.handleAxios()
        },

        // 右侧 活动热卖
        hotSale(){
            this.$axios({
                url:"/api/wcactivityTable/get",
                methods:"get",
                params:{}
            })
            .then(resp=>{
                console.log(resp.data.data,277)
                this.productArr1=resp.data.data
         
            })
            .catch(err=>{
                console.log(err)
            })
        },

        // 跳转登录
        goLogin(){
            this.$router.push({name:'Login'})
        },

        // 跳转注册
        gozce(){
            this.$router.push({name:'Register'})
         },

        //退出登录的方法
        tuichu(){
            sessionStorage.removeItem('userTel')
            this.$router.go(0)
         },

        //到个人中心
        gomycenter(){
            if(sessionStorage.getItem('userTel')==null){
                this.$router.push({
                    name:'Login'
                })
            }else{
                this.$router.push({
                    name:'MyCenter'
                })
            }
         },
        //去客服聊天
        gocustomerchat(){  
        if (sessionStorage.getItem('userTel')) {
            this.$router.push({name: 'CustomerChat'})
        }
        },

        // 跳转首页
        gohomepage(){
            this.$router.push({
                name:'HomePage'
            })
        }



       
  
        
    },

    mounted () {  
        // 掌柜热卖
        this.hotSale()
        
        if(localStorage.getItem('a')){
            this.index=0
            this.handleAxios()
            console.log(1)
            return
        }

        if(localStorage.getItem('shopptypyid')){
            this.typeid=localStorage.getItem('shopptypyid'),
            this.index=666,
            // 进页面就渲染   
            this.handleAxios()
            console.log(2)
            return
        }
         // 拿到搜索框值
        this.search=localStorage.getItem("hx220408inputValue")
        if(this.search!=""){
            this.index=-1
            // 进页面就渲染   
          this.handleAxios()
          console.log(3)
        }

        if(this.search==""){
            this.index=0
            console.log(4);
            this.handleAxios()
        }
        //拿到类型id  
        
       
        
        
    },
    beforeDestroy(){
        localStorage.removeItem("hx220408inputValue")
        localStorage.removeItem('a')
        localStorage.removeItem('shopptypyid')
    }
    
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;

}

.container{
    width: 90%;
    height: 1700px;
    margin: 0 auto;
    /* border: 1px solid black; */
    
}

/* 头部 图标 */
.header{
   margin-top: 40px;
   width: 80%; 
   height: 90px;
   /* border: 1px solid black; */
}

.header>div{
    display: flex;
    align-items: center;
    margin-top: 15px;
}

/* 闲呗图标 */
.header>div>img{
    width: 50px;
    height: 50px;
    margin-left: 15px;
    border-radius: 100%;
   
}

/* 闲呗搜索框 */
.header>div>input{
    width: 76%;
    height: 40px;
    margin-left: 72px;
    border:2px solid rgb(246, 237,108)
}

/* 中间内容 */
.content{
    width: 100%;
    height: 1900px;
    display: flex;
    /* border: 1px solid black; */
}

/* 左侧 */
.left{
    width: 80%;
    height: 1500px;
    /* border: 1px solid black; */
}

.left>div:nth-child(1){
    font-size: 15px ;
    font-weight: bold;
}

.left>div:nth-child(2){
    margin-top: 15px;
    width: 100%;
    height: 326px;
    border: 1px solid black;
}

/* 虚线 */
.left1>div{
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px dashed black;   
}

/*综合排序  */
.left2{
    width: 100%;
    height: 50px;
    margin-top: 20px;
    background-color: rgb(245,245,245);
    border: 1px solid black;
}

.left2>ul{
    display: flex;
    justify-content: space-around;
    line-height: 50px;
}

.left2>ul>li>ul{
    display: none;
}

.left2>ul>li:hover ul{
    width: 130px;
    text-align: center;
    display: block;
    position: absolute;
    background-color: white;
}

.left3{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid black;
}

.left3>ul{
    width: 90%;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
}

.left4{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;  /* 溢出隐藏 */
}

.left4>div{
    margin-top: 30px;
    width: 23%;
    height: 450px;
    border: 1px solid #ededed;
    transition: all 0.5s;  /* 动画过渡效果 */
    margin: 8px;
}


.commodityName1{
    margin-left: 20px;
    margin-top:23px;
    font-weight:bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.left4>div>img:hover{
    height: 60%;
    transform: translate(0, -3px);  /* y坐标上移 */
    /* transform: scale(1.2); */  /* 图片放大1.2倍 */ 
}

/* 悬停效果 */
.left4>div:hover{
     border: 1px solid red;
}

.left4>div>img{
    width: 100%;
    height: 60%;
}


/* 右侧 */
.right{
    width: 20%;
    height: 1500px;
    /* border: 1px solid black; */
}

.right>p{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight:bold;
    overflow: hidden; 
   
}

.right>div{
    margin: 0 auto;
    margin-top: 13px;
    width: 90%;
    height: 450px;
    border: 1px solid #ededed;
    transition: all 0.5s;
}

.right>div:hover{
    border: 1px solid red;
}


.right>div>img{
    width: 100%;
    height: 350px;
    
}

.right>div>img:hover{
    transform: translate(0, -3px);
}

/* 右侧文字溢出隐藏 */
.right1{
    margin-top: 15px;
    margin-left: 20px;
    font-weight:bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.right2{
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    font-size: 20px;
}


/* 底部 */
.footer{
    width: 80%;
    display: flex;
    justify-content:center ;
    align-items: center;
    margin-top: 50px;
}


/* 分页按钮 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color:  rgb(246, 237,108);
  color: white;
  border: 1px solid  rgb(246, 237,108);
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 综合排序 销量  样式索引 */
.textRed{
    color: red;
}

.classify:hover{
    color: red;
}

.a1{
    color: black;
    background-color: rgb(246, 237,108);
    border: rgb(246, 237,108);
}

.feneybox{
    margin-top: 30px;
    text-align: center;
    /* border: 1px solid red; */
    width: 520px;
    margin: 27px auto;
}



</style>
